<template>
    <div class="pc-questions">
        <p class="title">题库录入</p>
        <div class="form-table">
            <el-row>
                <el-col :span="12" :offset="6">
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-form-item label="题目描述">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                        <el-form-item v-for="(item, index) in domains" :label="indexList[index]">
                            <el-input v-model="item.value"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary">{{text}}</el-button>
                            <el-button type="primary" @click="addDomain">新增选项</el-button>
                            <el-button type="primary" @click="deleteDomain">删除选项</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'admin',
        data() {
            return {
                form: {
                    name: '',
                    password: ''
                },
                text: '提交',
                domains: [{
                    value: ''
                }],
                indexList: ['A', 'B', 'C', 'D', 'E', 'F']
            }
        },
        mounted(){
            this.addDomain()         
        },
        methods: {
            addDomain() {
                this.domains.push({
                    value: ''
                });
            },
            deleteDomain() {
                this.domains.pop()
            }
        }
    }
</script>

<style scoped lang="less">
    .pc-questions {
        .title {
            text-align: center;
            color: black;
            font-size: 30px;
        }
    }
</style>
